import React, { useState } from 'react';
import { BellFilled } from '@ant-design/icons';
import style from './index.module.css';
import { Button, Divider, Dropdown, Space, ConfigProvider } from "antd";
import { Badge, Calendar, BadgeProps, CalendarProps } from 'antd';
import type { Dayjs } from 'dayjs';
import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

const getListData = (value: Dayjs) => {
  let listData: { type: string; content: string }[] = []; // Specify the type of listData
  switch (value.date()) {
    case 1:
      listData = [
        { type: 'success', content: '九月你好' },
        { type: 'warning', content: '开学季' },
      ];
      break;
    case 3:
      listData = [
        { type: 'warning', content: '中国人民抗日战争胜' },
      ];
      break;
    case 5:
      listData = [
        { type: 'warning', content: '国际慈善日' },

      ];
      break;
    case 7:
      listData = [
        { type: 'success', content: '白露' },
      ];
      break;
    case 8:
      listData = [
        { type: 'warning', content: '国际新闻工作者日' },
        { type: 'warning', content: '国际扫盲日' },
      ];
      break;
    case 10:
      listData = [
        { type: 'success', content: '教师节' },
      ];
      break;
    case 14:
      listData = [
        { type: 'success', content: '音乐情人节' },
      ];
      break;
    case 15:
      listData = [
        { type: 'warning', content: '世界清洁地球日' },
      ];
      break;
    case 17:
      listData = [
        { type: 'success', content: '中秋节' },
      ];
      break;
    case 18:
      listData = [
        { type: 'warning', content: '918事变93周年' },
      ];
      break;
    case 20:
      listData = [
        { type: 'warning', content: '全国爱牙日' },
      ];
      break;
    case 21:
      listData = [
        { type: 'warning', content: '世界和平日' },
        { type: 'warning', content: '全民国防教育日' },
      ];
      break;
    case 22:
      listData = [
        { type: 'success', content: '秋分' },
      ];
      break;
    case 26:
      listData = [
        { type: 'warning', content: '世界避孕日' },
      ];
      break;
    case 27:
      listData = [
        { type: 'warning', content: '世界旅游日' },
      ];
      break;
    case 28:
      listData = [
        { type: 'success', content: '孔子文化节' },
        { type: 'warning', content: '世界狂犬病日' },
      ];
      break;
    case 29:
      listData = [
        { type: 'warning', content: '世界心脏日' },
      ];
      break;
    case 30:
      listData = [
        { type: 'warning', content: '中国烈士纪念日' },
      ];
      break;
    default:
  }
  return listData || [];
};

const getMonthData = (value: Dayjs) => {
  if (value.month() === 8) {
    return 1394;
  }
};

function Index() {
  const monthCellRender = (value: Dayjs) => {
    const num = getMonthData(value);
    return num ? (
      <div className="notes-month">
        <section>{num}</section>
        <span>Backlog number</span>
      </div>
    ) : null;
  };

  const handleDateClick = (url: string) => {
    console.log(url);

    if (url) {
      window.location.href = url;
    }
  };
  const handleDateClick1 = (date) => {
    console.log(`Clicked on date: ${date.format('YYYY-MM-DD')}`);
    // 你可以在这里处理其他逻辑，比如打开一个模态框或显示更多信息
    switch (date.date()) {
      case 1:
        window.location.href = '/rili/kaixue'
        break;
      case 3:
        window.location.href = '/rili/kangri'
        break;
      default:
        break;
    }
  };


  const dateCellRender = (value: Dayjs) => {

    const listData = getListData(value);
    return (
      <ul className="events">
        {listData.map((item) => (
          <li key={item.content} onClick={() => handleDateClick1(value)}>
            <Badge status={item.type as BadgeProps['status']} text={item.content} />
          </li>
        ))}
      </ul>
    );
  };

  const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
    if (info.type === 'date') return dateCellRender(current);
    if (info.type === 'month') return monthCellRender(current);
    return info.originNode;
  };

  const now = new Date();
  const [year, setYear] = useState(now.getFullYear());
  const [yue, setYue] = useState(now.getMonth() + 1);
  const [day, setDay] = useState(now.getDate());

  // 节日数据
  const holidays = [
    { date: '9月26日', content: '世界避孕日', url: '/rili/kaixue', daoji: "1" },
    { date: '9月27日', content: '世界旅游日', url: '/rili/kangri', daoji: "2" },
    { date: '9月28日', content: '孔子文化节', url: '', daoji: "3" },
    { date: '9月29日', content: '世界心脏日', url: '', daoji: "4" },
    { date: '9月30日', content: '中国烈士纪念日', url: '', daoji: "5" },
    { date: '10月01日', content: '国庆节', url: '', daoji: "6" },
    { date: '10月05日', content: '世界动物日', url: '', daoji: "7" },
    { date: '10月08日', content: '寒霜', url: '', daoji: "8" },
    { date: '10月09日', content: '世界邮政日', url: '', daoji: "9" },
    { date: '10月10日', content: '辛亥革命纪念日', url: '', daoji: "10" },
    { date: '10月11日', content: '重阳节', url: '', daoji: "11" },
    { date: '10月13日', content: '世界保健日', url: '', daoji: "12" },
    { date: '10月14日', content: '葡萄酒情人节', url: '', daoji: "13" },
    { date: '10月15日', content: '国际盲人节', url: '', daoji: "14" },
    { date: '10月16日', content: '世界粮食节', url: '', daoji: "15" },
    { date: '10月23日', content: '霜降', url: '', daoji: "16" },

  ];

  return (
    <div className={style.box}>
      <div className={style.left}>
        <div style={{ margin: "0 20px" }}>
          <h3 style={{ marginTop: "20px" }}>La amo</h3>
          <p style={{ marginTop: "40px" }}>低至<b style={{ color: "red", fontSize: "24px" }}>3.8</b>元/天 <Button style={{ background: "#e3a85c", fontWeight: "900", color: "#7a4717", marginLeft: "53%" }}>开通会员</Button></p>
          <div className={style.kaiTong}>
            开通会员,全场模版免费用 <span style={{ marginLeft: "29%", fontSize: "12px", color: "#666" }}>看卡会员特权 &gt;</span>
          </div>
        </div>
      </div>
      <div className={style.right}>
        <div className={style.rightTop}>
          <Dropdown dropdownRender={
            menu => (
              <div style={{ border: "1px solid #000", display: "flex", transform: 'scale(0.8)', height: "800px" }}>
                <ConfigProvider locale={locale}>
                  <Calendar cellRender={cellRender} fullscreen={true} style={{ width: '80%', height: '800px' }} />
                </ConfigProvider>

                <div className={style.zhitongche}>
                  <h1 style={{ marginLeft: "10%", marginTop: "10%" }}>国际直通车</h1>
                  <div style={{ height: "calc(100% - 60px)", overflowY: "auto" }}>
                    {holidays.map((holiday) => (
                      <div key={holiday.date} onClick={() => handleDateClick(holiday.url)} style={{ padding: '10px', cursor: 'pointer' }}>
                        <p style={{ marginTop: "5px" }}><span>{holiday.date}</span> <span style={{ marginLeft: "45%" }}>剩<b style={{ color: "blue" }}>{holiday.daoji}</b>天</span></p>
                        <h3 className={style.items}><span className={style.leftL}></span>{holiday.content}</h3>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )
          }>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                <div className={style.rightTopLeft}>
                  <h4 style={{ marginTop: "20px" }}><span style={{ fontSize: "24px" }}>{day}</span> /{yue} {year}</h4>
                  <p style={{ color: "#ccc", marginTop: "10px" }}>周日 农历 八月二十</p>
                </div>
              </Space>
            </a>
          </Dropdown>

          <div className={style.rightTopRight}>
            <h2 style={{ marginLeft: "20px" }}>世界无车日</h2>
          </div>
        </div>
        <div className={style.rightBottom}>
          <Divider style={{ margin: "0" }} />
          <p><BellFilled spin={true} style={{ color: "#fbbf60" }} />【一文看懂】全国国防教育主题宣传,线上答题就这么做</p>
          <p><BellFilled spin={true} style={{ color: "#fbbf60" }} />【免费模版上新】国庆预热,歌咏朗诵,书法绘画等评比活动,点开开产</p>
        </div>
      </div>
    </div>
  );
}

export default Index;
